var add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`
//添加类型-点击事件
//弹出层(模态框)的输入表单页面
$(".add").on("click", function () {


  var index = layer.open({

    type: 1,
    title: "新建类别",
    content: add_str,
    area: ['500px', '250px'],

    success: function () {
      $(".add-form").on("submit", function (ev) {
        ev.preventDefault();
        addCateAPI($(".add-form").serialize(), function (res) {
          console.log(res);
          load();
          //如果你想关闭最新弹出的层，直接获取layer.index即可
          layer.close(index);

        })
      })
    }

  });
})
//打开分类管理页-铺设分类页面
function load() {
  cateListAPI(function (res) {
    console.log(res)
    $(".layui-table tbody").empty()
    res.data.data.forEach(function (obj) {
      var { name, alias, Id } = obj;
      var theTr = `<tr>
      <td>${name}</td>
      <td>${alias}</td>
      <td>
        <button myid="${Id}" data-name="${name}" data-alias="${alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

        <button myid="${Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
        </td>
        </tr>`;
      $(".layui-table tbody").append(theTr)
    });
  })


}
load()

//事件委托=删除 点击事件
$(".layui-table tbody").on("click", ".delete", function (ev) {
  delCateAPI({ id: $(this).attr("myid") }, function () {
    $(ev.target).parents("tr").remove()
  })
})
//事件委托 编辑 点击事件
var edit_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<input type="hidden" name="Id">
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit >确认修改</button>
  </div>
</div>
</form>`
$(".layui-table tbody").on("click", ".edit", function (ev) {
  var index = layer.open({
    type: 1,
    title: "编辑分类",
    content: edit_str,
    area: ['500px', '250px'],
    success: function () {
      var myid = $(ev.target).attr("myid");
      var name = $(ev.target).attr("name");
      var alias = $(ev.target).attr("data_alias");
      //给弹出的编辑窗口,输入框赋值
      $(".add-form input[name=name]").val(name);
      $(".add-form input[name=alias]").val(alias);
      $(".add-form input[name=Id]").val(myid);
      $(".add-form").on("submit", serialize(), function (res) {
        load();
        layer.close(index);
      })
    }
  })
})

